<template>
    <a-card :bordered="false" style="margin-bottom: 20px" title="部门成员">
        <a-table
            :columns="columns"
            :data-source="tableData"
            :loading="tableLoading"
            :pagination="pagination"
            :rowSelection="rowSelection"
            :scroll="{ x: '100%' }"
            rowKey="id"
            @change="handleChange"
        >
             <span slot="header" slot-scope="text, record">
          <a-avatar v-if="record.img" :size="32" :src="record.img"/>
          <a-avatar v-else :size="32" icon="user"/>
        </span>
            <span slot="action" slot-scope="text, record">
          <template>
            <a-popconfirm cancel-text="否" ok-text="是" title="确认删除?"
                          @confirm="handleDelete(record)">
              <a-button type="link">删除</a-button>
            </a-popconfirm>
          </template>
        </span>
        </a-table>
    </a-card>
</template>

<script>
import basic from '@/mixins/basic'
import {readDepartDetail, delDepartUser} from "@/api/api";

export default {
    mixins: [basic],
    props: ['id'],
    data() {
        return {
            queryParam: {
                id: this.id
            },
            request: {
                page: readDepartDetail,
                delete: delDepartUser
            },
            pagination: {
                position: 'bottom',
                pageSizeOptions: [5, 10, 30, 40, 50],
                pageSize: 5,
                current: 1,
                total: 0,
                showTotal: total => `共${total} 条数据`,
                showQuickJumper: true,
                showSizeChanger: true
            },
            columns: [
                {
                    title: '名称',
                    dataIndex: 'realname'
                },
                {
                    title: '头像',
                    dataIndex: 'img',
                    scopedSlots: {customRender: 'header'}
                },
                {
                    title: '角色',
                    dataIndex: 'title'
                },
                {
                    title: '联系方式',
                    dataIndex: 'mobile'
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    width: 100,
                    fixed: 'right',
                    scopedSlots: {customRender: 'action'}
                }
            ],
            tableData: [],
        }
    }
};
</script>

<style>
</style>
